import React from 'react';
import { Box, MainButton } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { StepChildrenProps } from 'beta/containers/layout/StepWrapper';
import { useTranslation } from 'beta/utils/i18n';
import { parseMainColor } from 'beta/utils/typeGuards';

import { CardGrid } from '../components/CardGrid';
import { CardItem } from '../components/SellingCardItem';

type InternetAndAbroadOverviewProps = {
  optionsAsCardItems?: CardItem[];
  applicableVariantsAsCardItems?: CardItem[];
  onSelectVariant: (item: CardItem) => void;
  onSelectOption?: (item: CardItem) => void;
  selectedVariant?: CardItem;
  selectedOption?: CardItem;
  isLoading?: boolean;
  color?: MainColorType;
} & StepChildrenProps;

export const InternetAndAbroadOverview = ({
  applicableVariantsAsCardItems,
  optionsAsCardItems,
  color,
  onSelectVariant,
  onSelectOption,
  selectedVariant,
  selectedOption,
  isLoading,
  onNext,
}: InternetAndAbroadOverviewProps) => {
  const { t } = useTranslation('thjonustubreyting');

  const scrollToBottom = () => {
    const element = document.getElementById('bottom');
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };

  const handleSelectVariant = (variant: CardItem) => {
    onSelectVariant(variant);
    scrollToBottom();
  };

  const handleSelectOption = (variant: CardItem) => {
    onSelectOption && onSelectOption(variant);
    scrollToBottom();
  };

  return (
    <Box display="flex" gap={[5, 10]} flexDirection="column">
      {isLoading && (
        <CardGrid
          title={t('loadingOptions')}
          cardItems={Array.from({ length: 8 }).map((_, index: number) => ({
            id: index.toString(),
            isLoading: true,
          }))}
        />
      )}

      {applicableVariantsAsCardItems && (
        <CardGrid
          title={t('internet.title')}
          cardItems={applicableVariantsAsCardItems}
          onSelectCard={handleSelectVariant}
          selectedCard={selectedVariant}
          priceUnit={t('internet.unit')}
          color={color}
        />
      )}
      {optionsAsCardItems && (
        <CardGrid
          title={t('abroad.abroad')}
          cardItems={optionsAsCardItems}
          onSelectCard={handleSelectOption}
          selectedCard={selectedOption}
          priceUnit={t('abroad.unit')}
          color={color}
        />
      )}

      <Box id="bottom" display="flex" justifyContent="flex-end">
        <Box width={['100%', '100%', '5/12', '4/12']}>
          <MainButton
            colorScheme={parseMainColor(color || '', 'pink')}
            text={t('buttons.next')}
            icon="longArrowRight"
            isDisabled={!selectedOption && !selectedVariant}
            onClick={() => {
              if (onNext) onNext();
            }}
          />
        </Box>
      </Box>
    </Box>
  );
};